<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="text-center"> <h2>Creative Animated Loading icon in HTML5 CSS3</h2> </div> <div class="animationload"> <div class="osahanloading"></div> </div> </div> </div>

.animationload { background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; } .osahanloading { animation: 1.5s linear 0s normal none infinite running osahanloading; background: #fed37f none repeat scroll 0 0; border-radius: 50px; height: 50px; left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 50px; } .osahanloading::after { animation: 1.5s linear 0s normal none infinite running osahanloading_after; border-color: #85d6de transparent; border-radius: 80px; border-style: solid; border-width: 10px; content: ""; height: 80px; left: -15px; position: absolute; top: -15px; width: 80px; } @keyframes osahanloading { 0% { transform: rotate(0deg); } 50% { background: #85d6de none repeat scroll 0 0; transform: rotate(180deg); } 100% { transform: rotate(360deg); } }